<template>
  <div class="top-container">
    <div class="head">
      <div class="img" @click="toPath(0)">
        <img src="@/assets/img/dock/logo.png" alt="" />
      </div>
      <div class="select">
        <div class="btn" @click="showSelectPop = !showSelectPop">
          市级部门
          <i class="icon"></i>
        </div>
        <div
          class="select-pop"
          :style="{
            height: showSelectPop ? '606px' : '0px',
            padding: showSelectPop ? '50px 24px' : '0px 0px',
          }"
        >
          <template v-if="showSelectPop">
            <i class="close" @click="showSelectPop = !showSelectPop"></i>
            <div class="title">部门筛选</div>
            <div class="menu">
              <div
                v-for="item in selectArr"
                :key="item.path"
                @click="openPath(item.path)"
                class="menu-item"
              >
                {{ item.text }}
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="right">
        <div class="right-head">
          <div class="gray" @click="toPath(1)">全国一体化在线政务服务平台</div>
          <div class="vertical gray">|</div>
          <div class="gray" @click="toPath(2)">重庆市政府门户网站</div>
        </div>
        <div class="search">
          <el-input placeholder="请输入关键词" v-model.trim="searchValue">
            <el-button
              type="primary"
              slot="append"
              icon="el-icon-search"
              @click="search"
              >搜索</el-button
            >
          </el-input>
        </div>
      </div>
    </div>
    <div class="foot">
      <div
        v-for="(item, index) in footArr"
        :key="index"
        class="foot-item"
        @click="openPath(item.path)"
      >
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showSelectPop: false,
      selectArr: [
        {
          text: '市发展改革委',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000112',
        },
        {
          text: '市教委',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000113',
        },
        {
          text: '市科技局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000114',
        },
        {
          text: '市经济信息委',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000115',
        },
        {
          text: '市民族宗教委',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000116',
        },
        {
          text: '市公安局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000117',
        },
        {
          text: '市民政局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000118',
        },
        {
          text: '市司法局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000119',
        },
        {
          text: '市财政局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000120',
        },

        {
          text: '市人力社保局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=5500000121',
        },
        {
          text: '市规划自然资源局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000122',
        },
        {
          text: '市住房城乡建委',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000124',
        },
        {
          text: '市生态环境局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000123',
        },
        {
          text: '市交通局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000126',
        },
        {
          text: '市城市管理局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000125',
        },
        {
          text: '市水利局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000127',
        },
        {
          text: '市农业农村委',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000128',
        },
        {
          text: '市商务委',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000129',
        },
        {
          text: '市文化旅游委',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000130',
        },
        {
          text: '市卫生健康委',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000131',
        },
        {
          text: '市退役军人事务局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000132',
        },
        {
          text: '市市场监管局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000137',
        },
        {
          text: '市应急局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000133',
        },
        {
          text: '市审计局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000134',
        },
        {
          text: '市体育局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000138',
        },
        {
          text: '市扶贫办',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000140',
        },
        {
          text: '市统计局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000139',
        },
        {
          text: '市医保局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000141',
        },
        {
          text: '市金融监管局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000144',
        },
        {
          text: '市人民防空办',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000149',
        },
        {
          text: '市公共资源交易监管局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000151',
        },
        {
          text: '市能源局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000152',
        },
        {
          text: '市林业局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000155',
        },
        {
          text: '市药监局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000156',
        },
        {
          text: '市知识产权局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000157',
        },
        {
          text: '市文化执法总队',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000163',
        },
        {
          text: '重庆市国安局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000164',
        },
        {
          text: '重庆煤监局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000172',
        },
        {
          text: '市气象局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000173',
        },
        {
          text: '市通信管理局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000174',
        },
        {
          text: '市地震局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000177',
        },
        {
          text: '市档案局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000106',
        },
        {
          text: '市新闻出版局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000108',
        },
        {
          text: '市电影局',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000109',
        },
        {
          text: '市政府侨务办',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000180',
        },
        {
          text: '市网信办',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000110',
        },
        {
          text: '市消防总队',
          path: 'http://zwykb.cq.gov.cn/sxqd/xzql/?orgcode=500000181',
        },
      ],
      searchValue: null,
      footArr: [
        {
          text: '首页',
          path: 'http://zwykb.cq.gov.cn/',
        },
        {
          text: '个人办事',
          path: 'https://zwykb.cq.gov.cn/grbs/',
        },
        {
          text: '法人办事',
          path: 'http://zwykb.cq.gov.cn/frbs/',
        },
        {
          text: '事项清单',
          path: 'http://zwykb.cq.gov.cn/sxqd/',
        },
        {
          text: '服务专区',
          path: 'http://zwykb.cq.gov.cn/fwzq/',
        },
        {
          text: '好差评',
          path: 'http://zwykb.cq.gov.cn/hcp/',
        },
        {
          text: '效能监督',
          path: 'http://zwykb.cq.gov.cn/xnjd/',
        },
      ],
    };
  },
  methods: {
    toPath(num) {
      console.log(window);
      const pathArr = [
        'http://zwykb.cq.gov.cn/',
        'http://gjzwfw.www.gov.cn/index.html',
        'http://www.cq.gov.cn/',
      ];
      window.open(pathArr[num]);
    },
    search() {
      if (this.searchValue) {
        const reg = /[`~!@#$%^&*_+<>{}/'[\]]/im;
        if (reg.test(this.searchValue)) {
          this.$message.error('您输入的信息包含非法字符');
          return false;
        }
        window.open(
          'http://zwykb.cq.gov.cn/qqcnext/searchResultPCCQ.html?sitecode=5d0495bd1e1f4ae087b2e5ce7b60def3&siteid=107&keyWork=' +
            encodeURI(this.searchValue),
        );
      }
    },
    openPath(path) {
      window.open(path);
    },
  },
};
</script>
<style lang="scss" scoped>
.top-container {
  width: 100%;
  height: 156px;
  background: #fff;
  .head {
    width: 1200px;
    height: 110px;
    margin: auto;
    display: flex;
    align-items: center;
    .select {
      position: relative;
      margin-left: 30px;
      width: 113px;
      height: 30px;
      .btn {
        width: 100%;
        height: 100%;
        padding-left: 11px;
        display: flex;
        align-items: center;
        font-size: 16px;
        background-color: #2789ee;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
        .icon {
          margin-left: 16px;
          width: 10px;
          height: 7px;
          background: url('~@/assets/img/dock/icon-down-action.png') no-repeat
            center center;
          background-size: cover;
        }
      }
      .select-pop {
        position: absolute;
        width: 1050px;
        height: 0px;
        left: calc(50% - 525px);
        top: calc(100% + 10px);
        padding: 50px 24px;
        background-color: #fff;
        border-radius: 5px;
        z-index: 99999;
        box-shadow: 0px 0px 8px rgb(0 0 0 / 10%);
        transition: height 0.5s ease;
        overflow: hidden;
        .close {
          position: absolute;
          right: 16px;
          top: 16px;
          width: 25px;
          height: 25px;
          background: url('~@/assets/img/dock/c-select-model.png') no-repeat
            center center;
          background-size: cover;
          cursor: pointer;
        }
        .title {
          font-size: 16px;
          padding-left: 11px;
          font-weight: bold;
          line-height: 18px;
          border-left: 4px solid #2775cc;
          color: #2775cc;
          margin: 10px 0;
        }
        .menu {
          padding-left: 20px;
          display: flex;
          flex-wrap: wrap;
          border-bottom: 1px solid #f5f5f5;
          .menu-item {
            width: 25%;
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
            cursor: pointer;
          }
        }
      }
    }
    .right {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      .right-head {
        margin-top: 6px;
        margin-right: 14px;
        display: flex;
        justify-content: flex-end;
        .gray {
          color: #aaa;
          font-size: 16px;
        }
        .vertical {
          margin: 0px 12px;
        }
      }
      .search {
        margin-top: 12px;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        .el-input {
          width: 264px;
          border-radius: 2px;
          border: solid 1px #2789ee;
          ::v-deep {
            input {
              height: 32px;
              border-color: rgba(256, 256, 256, 0) !important;
            }
            .el-input-group__append {
              border-color: rgba(256, 256, 256, 0) !important;
              border-radius: 0px;
              background-color: rgb(39, 137, 238);
              padding: 0px 8px;
              .el-button {
                color: #fff;
                i,
                span {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
  .foot {
    margin: auto;
    width: 1200px;
    height: 46px;
    display: flex;
    .foot-item {
      margin-right: 20px;
      flex: 1;
      display: flex;
      justify-content: center;
      .text {
        height: 46px;
        line-height: 32px;
        padding-bottom: 10px;
        font-size: 20px;
        color: #3d5267;
        font-weight: bold;
        border-bottom: 4px solid #fff;
        cursor: pointer;
        &:hover {
          color: #2789ee;
          font-size: 24px;
          border-color: #2789ee;
        }
      }
    }
  }
}
</style>
